<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery操作示例</title>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .error {
            color: #fe0303;;
        }
    </style>
</head>
<body>
    <h2>jQuery操作示例</h2>
    
    <!-- 添加操作 -->
    <form id="addForm">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
        <button type="submit" id="addBtn">添加</button>
    </form>

    <!-- 删除操作 -->
    <ul id="list">
        <!-- 列表数据动态添加 -->
    </ul>

    <!-- 修改操作 -->
    <form id="updateForm">
        <label for="updateName">修改姓名：</label>
        <input type="text" id="updateName" name="updateName">
        <button type="submit" id="updateBtn">修改</button>
    </form>
    
    <!-- 查询操作 -->
    <input type="text" id="searchName" name="searchName">
    <button id="searchBtn">查询姓名</button>
    
    <!-- 前端表单数据验证 -->
    <form id="validationForm">
        <label for="email">Email：</label>
        <input type="text" id="email" name="email">
        <span class="error" id="emailError"></span>
        <button type="submit" id="validateBtn">验证</button>
    </form>

    <script>
        // 添加操作
        $("#addForm").submit(function(event) {
            event.preventDefault();
            var name = $("#name").val();
            $("#list").append("<li>" + name + " <button class='deleteBtn'>删除</button></li>");
            $("#name").val("");
        });

        // 删除操作
        $("#list").on("click", ".deleteBtn", function() {
            $(this).parent().remove();
        });

        // 修改操作
        $("#updateForm").submit(function(event) {
            event.preventDefault();
            var updateName = $("#updateName").val();
            $("#list li:first").text(updateName + " ").append("<button class='deleteBtn'>删除</button>");
            $("#updateName").val("");
        });

        // 查询操作
        $("#searchBtn").click(function() {
            var searchName = $("#searchName").val();
            var result = $("#list li:contains('" + searchName + "')").text();
            alert(result);
        });

        // 前端表单数据验证
        $("#validationForm").submit(function(event) {
            event.preventDefault();
            var email = $("#email").val();
            if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
                $("#emailError").text("");
                alert("验证通过！");
            } else {
                $("#emailError").text("请输入有效的Email地址");
            }
        });
    </script>
</body>
</html>